<div class="text-center bg-primary container-fluid">
    <br>
    <h1><?php echo INSTALL_STEP2_TITLE;?></h1>
    <h3><?php echo INSTALL_STEP2_SUBTITLE;?></h3>
    <br>
</div>
<div align="center">
    <h3 class="text-primary"><?php echo INSTALL_STEP2_CHOOSE_DB;?></h3>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary" id="fileDBLabel">
            <input type="radio" name="option" id="fileDB"><?php echo INSTALL_STEP2_CHOOSE_DB_FILE;?>
        </label>
        <label class="btn btn-primary" id="mySQLLabel">
            <input type="radio" name="option" id="mySQL"><?php echo INSTALL_STEP2_CHOOSE_DB_MYSQL;?>
        </label>
    </div>
    <br><br>
    <div id="inputDIV">
        <div class="input-control has-icon-left" style="width: 75%">
            <input id="inputServer" type="text" class="form-control"
                   placeholder="<?php echo INSTALL_STEP2_FORM_LABEL1;?>">
            <label for="inputServer" class="input-control-icon-left"><i class="icon-server text-primary"></i></label>
        </div>
        <br>
        <div class="input-control has-icon-left" style="width: 75%">
            <input id="inputUser" type="text" class="form-control"
                   placeholder="<?php echo INSTALL_STEP2_FORM_LABEL2;?>">
            <label for="inputUser" class="input-control-icon-left"><i class="icon-user text-primary"></i></label>
        </div>
        <br>
        <div class="input-control has-icon-left" style="width: 75%">
            <input id="inputPassword" type="text" class="form-control"
                   placeholder="<?php echo INSTALL_STEP2_FORM_LABEL3;?>">
            <label for="inputPassword" class="input-control-icon-left"><i class="icon-key text-primary"></i></label>
        </div>
        <br>
        <div class="input-control has-icon-left" style="width: 75%">
            <input id="inputDBName" type="text" class="form-control"
                   placeholder="<?php echo INSTALL_STEP2_FORM_LABEL4;?>">
            <label for="inputDBName" class="input-control-icon-left"><i class="icon-database text-primary"></i></label>
        </div>
        <br>
        <div class="input-control has-icon-left" style="width: 75%">
            <input id="inputPort" type="number" class="form-control"
                   placeholder="<?php echo INSTALL_STEP2_FORM_LABEL5;?>"
                   value="3306">
            <label for="inputPort" class="input-control-icon-left"><i class="icon-hdd text-primary"></i></label>
        </div>
    </div>
    <br>
</div>
<div class="text-center bg-primary container-fluid">
    <div align="center">
        <br>
        <button id="back" class="btn btn-info btn-lg"><?php echo INSTALL_BUTTON_BACK;?></button>
        <button id="next" class="btn btn-info btn-lg"><?php echo INSTALL_BUTTON_NEXT;?></button>
    </div>
    <br>
</div>
<script>
    $(document).ready(function () {
        initTypeChooser();
        $("#back").click(function () {
            self.location.href = "./?/install&step=1";
        });
        $("#next").click(function () {
            run_db();
        });
        $("#fileDB").change(function () {
            $("#inputDIV").fadeOut();
        });
        $("#mySQL").change(function () {
            $("#inputDIV").fadeIn();
        });
    });

    function initTypeChooser() {
        var support_mysql = "<?php echo extension_loaded('mysqli');?>";
        if (!support_mysql){
            $("#fileDB").click();
            $("#mySQLLabel").attr({"disabled":true});
            $("#inputDIV").hide();
        }else {
            $("#mySQL").click();
        }
    }

    function run_db() {
        new $.zui.Messager("<?php echo INSTALL_STEP2_DB_RUNNING;?>", {
            type: "info"
        }).show();
        var db_type = document.getElementById("mySQL").checked ? "mysql" : "file";
        var db_host = document.getElementById("inputServer").value;
        var db_user = document.getElementById("inputUser").value;
        var db_pass = document.getElementById("inputPassword").value;
        var db_name = document.getElementById("inputDBName").value;
        var db_port = document.getElementById("inputPort").value;
        $.post("./?/install", {
            command: "testDB",
            type: db_type,
            host: db_host,
            user: db_user,
            pass: db_pass,
            name: db_name,
            port: db_port
        }, function (data) {
            var is_debug = "<?php echo $_GET['debug'];?>" === "yes";
            if (is_debug) {
                console.log(data);
            }
            var value = JSON.parse(data);
            if (value.status === "fail") {
                new $.zui.Messager('<?php echo INSTALL_STEP2_DB_CONNECT_FAIL;?>', {
                    type: "danger"
                }).show();
                console.log(value.reason);
            } else if (value.status === "finish") {
                new $.zui.Messager('<?php echo INSTALL_STEP2_DB_INSTALL_FINISH_1;?>' + value.successful + '<?php echo INSTALL_STEP2_DB_INSTALL_FINISH_2;?>' + value.fail + '<?php echo INSTALL_STEP2_DB_INSTALL_FINISH_3;?>', {
                    icon: "ok-sign",
                    type: "success"
                }).show();
                setTimeout(function () {
                    if (is_debug) {
                        console.log(value);
                    } else {
                        self.window.location = "./?/install&step=3";
                    }
                }, 2000);
            }else {
                new $.zui.Messager("<?php echo INSTALL_STEP2_DB_INSTALL_UNKNOWN_ERROR;?>",{
                    type:"danger"
                }).show();
                console.log(data);
            }
        });
    }
</script>